<script setup lang="ts">
import workingData from './Lotties/Animation-working.json';
import { User, View } from '@element-plus/icons-vue'
const ruleFormRef = ref<FormInstance>()
const { login } = useAuth()
const validateMobile = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('手机号不能为空'))
  } else {
    // 正则判断手机号
    const reg = /^1[3-9]\d{9}$/
    if (!reg.test(value)) {
      callback(new Error('请输入正确的手机号'))
    }
    callback()
  }
}
const validatePassword = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('密码不能为空'))
  } else {
    // 密码至少8位，至少包含数字和字母
    const reg = /^(?=.*\d)(?=.*[a-zA-Z])[0-9a-zA-Z]{8,}$/
    if (!reg.test(value)) {
      callback(new Error('密码至少8位，至少包含数字和字母'))
    }
    callback()
  }
}

const ruleForm = reactive({
  mobile: '',
  password: '',
})

const rules = reactive<FormRules<typeof ruleForm>>({
  mobile: [{ validator: validateMobile, trigger: 'change' }],
  password: [{ validator: validatePassword, trigger: 'change' }],
})

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      console.log('submit!')
      await login(ruleForm)
    } else {
      console.log('error submit!')
      return false
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

</script>

<template>
  <div class="h-screen w-full  login-bg flex justify-center items-center relative">
    <main class="flex justify-center items-center">
      <div class="flex justify-center items-center w-500 h-800  box-border shadow-2xl rounded-2xl bg-white">
        <div class="bg-blue-600">
          <Vue3Lottie :animationData="workingData" :width="500" :height="500" />
        </div>
        <div class="h-800">
          <div class="p-4 box-border">
            <p class="text-xl text-center py-4 mb-4">7彩达惠</p>
            <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="60px" class="p-2">
              <el-form-item label="手机号" prop="mobile">
                <el-input size="large" :prefix-icon="User" v-model="ruleForm.mobile" placeholder="请输入手机号" type="text"
                  autocomplete="off" style="width:300px;" />
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input size="large" :prefix-icon="View" v-model.number="ruleForm.password" placeholder="请输入密码"
                  type="password" style="width:300px;" />
              </el-form-item>
              <el-form-item>
                <el-button size="large" style="width:100%;" type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </main>
    <footer class="absolute bottom-0 w-full">
      <div class="bg-black text-white text-center font-light text-sm">
        <p class="inline-block">Copyright © 2024 7彩达惠</p>
        <p class="inline-block">All Rights Reserved.</p>
      </div>
    </footer>
  </div>
</template>

<style lang="scss" scoped>
.login-bg {
  // 背景涂满
  background-size: cover;
  background-image: url('@/assets/images/bg/2.svg');
}
</style>
